
import React, { useEffect, useState } from "react";
import type { FC } from "react";
import { Button, Popup, Space, Swiper } from "antd-mobile";
import guideImg from "../../../assets/guide_imgs/guide.png";
import guideImg1 from "../../../assets/guide_imgs/guide1.png";
import guideImg2 from "../../../assets/guide_imgs/guide2.png";
import guideImg3 from "../../../assets/guide_imgs/guide3.png";
import guideImg4 from "../../../assets/guide_imgs/guide4.png";
import guideImg5 from "../../../assets/guide_imgs/guide5.png";
import "./index.css";
interface GuidePage {
  text: string;
}
const list = [guideImg, guideImg1, guideImg2, guideImg3, guideImg4, guideImg5];
import "./index.css";

const WithPopup: FC = () => {
  const [visible, setVisible] = useState<boolean>();
  useEffect(() => {
    if (localStorage.getItem("visible") !== "false") {
      localStorage.setItem("visible", JSON.stringify(true));
      const visb = JSON.parse(localStorage.getItem("visible") as string);
      setVisible(visb);
    } else {
      return;
    }
  }, []);
  const guide = (index: number) => {
    if (index === 5) {
      setVisible(false);
      localStorage.setItem("visible", JSON.stringify(false));
    }
  };
  return (
    <>
      <Popup position="bottom" visible={visible} destroyOnClose>
        <Swiper indicator={false}>
          {list.map((item, index) => {
            return (
              <Swiper.Item key={item} onClick={() => guide(index)}>
                <img
                  src={item}
                  style={{ width: "100%", height: "100%" }}
                  alt={list[index]}
                  draggable={true}
                />
              </Swiper.Item>
            );
          })}
        </Swiper>
      </Popup>
    </>
  );
};

export default WithPopup;
